<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>理解css动画中的fill-mode</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            padding: 20px;
        }
        div{
            width: 200px;
            height: 100px;
            background-color: hsl(120deg, 50%, 50%);
            animation: changebg 3s ease-in-out;
            animation-delay: 1s;
            /* animation-fill-mode: none; 动画结束后，恢复默认状态：即绿色 */
            /* animation-fill-mode: backwards; 无论动画是否被延长，将第一帧动画应用，即第一眼看见的效果是蓝色，但是动画结束后，仍会回到初始状态 */
            /* animation-fill-mode: forwards; 应用动画的最好一帧 */
            /* animation-fill-mode: both; 应用动画第一帧和最后一帧，是backwards和forwards节后， 所以，开始时看见的是蓝色，最后看见的是红色 */
            animation-fill-mode: both; 
        }
        @keyframes changebg {
            from {
                background-color: hsl(240deg, 50%, 50%);
            }
            to {
                background-color: hsl(0deg, 50%, 50%);
            }
        }
    </style>
</head>
<body>
    <div>理解css动画中的fill-mode</div>
</body>
</html>